<template>
	<view class="page">
		<view class="top-swiper">
			<swiper class="swiper-list" indicator-dots indicator-color="#7D7D7D" indicator-active-color="#006EFD">
				<swiper-item class="swiper-item" v-for="(item, index) in bannerList" :key="index" @click="preview(index)">
					<image :src="item || '/static/images/ic_img.png'" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="hospital-info">
			<view class="hospital-title">{{ hospital.hospitalName || '' }}</view>
			<view class="hospital-tab-list">
				<view class="tab-item" v-if="hospital.hospitalGrade">{{ hospital.hospitalGrade || '' }}</view>
				<view class="tab-item2" v-if="hospital.hospitalType">{{ hospital.hospitalType || '' }}</view>
			</view>
			<view class="hospital-introduce" @click="goHospitalSynopsis()">{{ hospital.hospitalSynopsis || '' }}</view>
			<view class="hospital-address">
				<view class="address">
					<view class="address-detail">
						{{ hospital.provinceName || '' }}{{ hospital.cityName || '' }}{{ hospital.hospitalAddress || '' }}
					</view>
					<view v-if="distance && time" class="distance">距离您{{ distance }}，驾车{{ time }}分钟</view>
				</view>
				<view class="navigation" v-if="hospital.latitude && hospital.longitude" @click="goNavigation()">
					<image src="/static/images/dhzlocation@3x.png"></image>
					<view class="navigation-text">导航</view>
				</view>
			</view>
		</view>
		<!-- 服务项目 -->
		<view class="project-list">
			<view class="project-title">服务项目</view>
			<view class="project-item" v-for="(item, index) in serviceItemsList" :key="index">
				<view>
					<image class="project-image" mode="aspectFill" :src="item.icon"></image>
				</view>
				<view class="project-info">
					<view class="top-info">{{ item.serviceName || '' }} {{ item.subtitle || '' }}</view>
					<view class="serve-price">
						<text>￥{{ item.price || 0 }}</text>
						元/{{ item.specification | statusFilter }}
					</view>
					<view class="bottom-info">
						<view class="tabs" v-if="item.categoryName">{{ item.categoryName || '' }}</view>
					</view>
				</view>
				<view class="booking-btn" @click="goBook(item)">预约</view>
			</view>
		</view>
		<!-- 医生点评 -->
		<view class="project-list">
			<view class="project-title">医生点评</view>
			<view class="filtrate" @click.stop="showDepartment = !showDepartment">
				<picker range-key="departmentName" :range="departmentList" @change="changeDepartment">
					<view class="departmentName">{{ departmentName ? departmentName : '科室筛选' }}</view>
					<image src="/static/images/drop-downhs@3x.png"></image>
				</picker>
			</view>
			<doctor-item v-for="(item, index) in doctorList" :key="index" :item="item"></doctor-item>
			<view class="tips" v-if="doctorList.length == 0">抱歉，此医院没有这个科室的医生~</view>
		</view>
		<!-- 底部分享 -->
		<view class="share-fixed">
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="share">
				<image class="share-icon" src="/static/images/share@3x.png"></image>
				<view class="share-text">分享</view>
			</button>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view @click="toshare">
				<image class="share-icon" src="/static/images/share@3x.png"></image>
				<view class="share-text">分享</view>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import DoctorItem from '@/components/doctor-item/doctor-item.vue';
	import {
		getDoctorList,
		getHospitalDetails,
		getServiceItemsListByParam,
		getListByTree
	} from '@/apis/request.js';

	import {
		geocoder,
		getLocation
	} from '@/components/public.js';

	export default {
		components: {
			DoctorItem
		},
		data() {
			return {
				id: '',
				city: {
					id: 350200,
					title: '厦门市'
				},
				user: {},
				bannerList: [],
				hospital: {},
				serviceItemsList: [],
				page: 1,
				total: 0,
				doctorList: [],
				time: '',
				distance: '',
				location: null,
				showDepartment: false,
				departmentList: [],
				departmentId: '',
				departmentName: '',
				index: null
			};
		},
		filters: {
			statusFilter(status) {
				if (status == 0) {
					return '次';
				} else if (status == 1) {
					return '半天';
				} else if (status == 2) {
					return '白天';
				} else if (status == 3) {
					return '夜间';
				} else if (status == 4) {
					return '全天';
				} else {
					return '月';
				}
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.city = uni.getStorageSync('city');
			this.user = uni.getStorageSync('userInfo');
			this.getHospitalDetails();
			this.getServiceItemsList();
			this.getDepartmentList();
			this.getList();
			getLocation().then(res => {
				this.location = {
					latitude: res.latitude,
					longitude: res.longitude
				};
			});
		},
		onReachBottom() {
			if (this.doctorList.length < this.total) {
				this.getList();
			}
		},
		onShareAppMessage() {
			const path = `/pages/LoginPages/mylogin/main?inviteCode=${this.user.invitationCode}`;
			return {
				title: this.$shareContent,
				imageUrl: this.$shareImageUrl,
				path: path
			};
		},
		methods: {
			getHospitalDetails() {
				uni.showLoading({
					title: '加载中'
				});
				let params = {
					hospitalId: this.id,
					userId: this.user.id || ''
				};
				getHospitalDetails(params).then(res => {
					this.hospital = res || {};
					this.bannerList = this.hospital.images ? this.hospital.images.split(',') : [''];
					if (this.hospital.latitude && this.hospital.longitude) {
						this.getDrivingTime();
					} else {
						const params = {
							address: this.hospital.hospitalAddress
						};
						geocoder(params, location => {
							this.hospital.latitude = location.lat;
							this.hospital.longitude = location.lng;
							this.getDrivingTime();
						});
					}
				}).finally(() => {
					uni.hideLoading();
				});
			},
			getServiceItemsList() {
				getServiceItemsListByParam({
					cityId: this.city.id
				}).then(res => {
					this.serviceItemsList = res;
				});
			},
			preview(index) {
				uni.previewImage({
					urls: this.bannerList,
					current: index
				});
			},
			goBook(item) {
				uni.navigateTo({
					url: '/pages/servePages/serveDetail?id=' + item.id + '&hospitalId=' + this.id
				});
			},
			goHospitalSynopsis() {
				uni.setStorageSync('gohospitalSynopsis', this.hospital.hospitalSynopsis);
				uni.navigateTo({
					url: '/pages/IndexPages/hospitalDetails/hospitalSynopsis?id=' + this.id
				});
			},
			getDrivingTime() {
				if (this.location) {
					this.getDistance(this.location.latitude, this.location.longitude, this.hospital.latitude, this.hospital
						.longitude);
				}
			},
			Rad(d) {
				return (d * Math.PI) / 180.0; //经纬度转换成三角函数中度分表形式。
			},
			//lat1 用户纬度
			//lng1 用户经度
			//lat2 医院纬度
			//lng2 医院经度
			getDistance(lat1, lng1, lat2, lng2) {
				let radLat1 = this.Rad(lat1);
				let radLat2 = this.Rad(lat2);
				let a = radLat1 - radLat2;
				let b = this.Rad(lng1) - this.Rad(lng2);
				let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(
					Math.sin(b / 2), 2)));
				s = s * 6378.137; // 地球半径;
				s = Math.round(s * 10000) / 10000; //输出为km
				// 默认速度为30km/h
				this.time = ((s / 30) * 60).toFixed(0); //单位是分钟
				if (s < 1) {
					this.distance = (s * 1000).toFixed(0) + 'm';
				} else {
					this.distance = s.toFixed(1) + 'km';
				}
			},
			goNavigation() {
				//导航
				if (this.hospital.latitude && this.hospital.longitude) {
					uni.openLocation({
						latitude: this.hospital.latitude,
						longitude: this.hospital.longitude
					});
				} else {
					uni.openLocation({
						latitude: this.lat2,
						longitude: this.lng2
					});
				}
			},
			getList() {
				const params = {
					pageNo: this.page,
					pageSize: 10,
					hospitalId: this.id,
					departmentId: this.departmentId
				};
				getDoctorList(params).then(res => {
					const list = res.records || [];
					if (this.page == 1) {
						this.total = res.total;
						this.doctorList = list;
					} else {
						this.doctorList = this.doctorList.concat(list);
					}
					if (this.doctorList.length < this.total) {
						this.page++;
					}
				});
			},
			toshare() {
				const user = uni.getStorageSync('userInfo') || {};
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 5,
					imageUrl: this.$shareImageUrl,
					title: this.$shareContent,
					miniProgram: {
						id: this.$shareMiniId,
						path: `/pages/LoginPages/mylogin/main?inviteCode=${user.invitationCode}`,
						type: 0, //0-正式版； 1-测试版； 2-体验版
						webUrl: this.$shareWebUrl
					},
					success: ret => {
						console.log(JSON.stringify(ret));
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			changeDepartment(e) {
				let item = this.departmentList[e.detail.value];
				if (item.departmentName == '全部') {
					this.departmentName = '';
					this.departmentId = '';
				} else {
					this.departmentId = item.departmentId;
					this.departmentName = item.departmentName;
				}
				this.page = 1;
				this.getList();
				this.showDepartment = false;
			},
			//获取医院科室列表
			async getDepartmentList() {
				const list = await getListByTree();
				const listitem = list.map((item, index) => {
					return {
						departmentId: item.id,
						departmentName: item.departmentName
					};
				});
				listitem.unshift({
					departmentId: '',
					departmentName: '全部'
				});
				this.departmentList = listitem;
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #f2f2f2ff;
		height: 100%;
		min-height: 100vh;

		.top-swiper {
			width: 750rpx;
			height: 360rpx;

			.swiper-list {
				width: 750rpx;
				height: 360rpx;

				.swiper-item {
					image {
						width: 750rpx;
						height: 360rpx;
					}
				}
			}
		}

		.hospital-info {
			background-color: #fff;
			padding: 30rpx;

			.hospital-title {
				font-weight: bold;
				color: #333333;
				font-size: 34rpx;
			}

			.hospital-tab-list {
				display: flex;
				margin-top: 16rpx;

				.tab-item {
					background-color: #f4a200;
					color: #fff;
					font-size: 20rpx;
					padding: 6rpx 10rpx;
					margin-right: 10rpx;
					border-radius: 6rpx;
				}

				.tab-item2 {
					background-color: #32C59A;
					color: #fff;
					font-size: 20rpx;
					padding: 6rpx 10rpx;
					margin-right: 10rpx;
					border-radius: 6rpx;
				}
			}

			.hospital-introduce {
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #666666;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.hospital-address {
				margin-top: 30rpx;
				width: 690rpx;
				background-color: #f2f2f2ff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 26rpx 30rpx;
				box-sizing: border-box;

				.address {
					margin-right: 20upx;

					.address-detail {
						font-size: 24rpx;
						color: #202020ff;
					}

					.distance {
						padding-top: 12rpx;
						font-size: 20rpx;
						color: #999999ff;
					}
				}

				.navigation {
					flex-shrink: 0;

					image {
						width: 38rpx;
						height: 38rpx;
					}

					.navigation-text {
						font-size: 20rpx;
						color: #333333ff;
					}
				}
			}
		}

		.project-list {
			background-color: #fff;
			margin-top: 20rpx;

			.project-title {
				display: inline-block;
				padding: 30rpx 0 0 30rpx;
				color: #020202ff;
				font-size: 34rpx;
				font-weight: bold;
			}

			.filtrate {
				display: inline-block;
				position: absolute;
				right: 30rpx;
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #32C59A;
				padding: 8rpx 20rpx;
				border: 1rpx solid #b0b0b0;
				border-radius: 5upx;

				.departmentName {
					display: inline-block;
					margin-right: 10rpx;
					vertical-align: middle;
				}

				image {
					width: 15rpx;
					height: 10rpx;
					vertical-align: middle;
				}
			}

			.tips {
				padding: 80rpx 30rpx;
				color: #838383ff;
				font-size: 34rpx;
			}

			/* :last-child {
			border: none;
		} */

			.project-item {
				display: flex;
				justify-content: space-between;
				padding: 30rpx;
				border-bottom: 2rpx solid #e8e8e8ff;

				.project-image {
					width: 144rpx;
					height: 144rpx;
					border-radius: 10rpx;
				}

				.project-info {
					width: 382rpx;
					margin: 0 40rpx 0 20rpx;

					.top-info {
						font-size: 30rpx;
						color: #333333ff;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.serve-price {
						margin-top: 8rpx;
						font-size: 26rpx;
						color: #a3a3a3;

						text {
							color: #ff290b;
							font-size: 34rpx;
						}
					}

					.bottom-info {
						display: flex;
						margin-top: 10rpx;

						.tabs {
							background-color: #fbf5ecff;
							border: 2rpx solid #faac18ff;
							font-size: 20rpx;
							padding: 4rpx 8rpx;
							margin-right: 8rpx;
							border-radius: 6rpx;
							color: #faac18ff;
						}
					}
				}

				.booking-btn {
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					border-radius: 25rpx;
					background-color: #32C59A;
					color: #ffffffff;
					font-size: 24rpx;
				}
			}
		}

		.share-fixed {
			position: fixed;
			right: 30rpx;
			bottom: 400rpx;
			border-radius: 48rpx;
			padding: 30rpx;
			background-color: #fff;
			box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

			.share-icon {
				width: 38rpx;
				height: 38rpx;
			}

			.share-text {
				font-size: 20rpx;
				color: #333333ff;
			}
		}
	}

	/deep/ .u-back-text {
		min-width: 70rpx;
	}

	button::after {
		border: none;
	}

	button {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 1.35;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		background-color: #fff;
	}
</style>